﻿@using Web.ViewModel.CoreData

@{
    ViewBag.Title = "欢迎进入后台管理";
    Layout = "~/Views/Shared/_BackStageLayout.cshtml";
    UserModel user = new UserModel()
    {
        Id = Guid.NewGuid().ToString()
    };
    List<ShipModel> shipList = new List<ShipModel>();
    if (ViewData["Data"] != null)
    {
        user = (UserModel)ViewData["Data"];
    }
    if (ViewData["ShipData"] != null)
    {
        shipList = (List<ShipModel>)ViewData["ShipData"];
    }
    List<Configs> configlist = (List<Configs>)ViewData["Configs"];
    List<CompanyModel> companylist = (List<CompanyModel>)ViewData["Company"];
    List<UserModel> userlist = (List<UserModel>)ViewData["User"];
}
<link href="/Content/assets/plugins/jquery-tag-it/css/jquery.tagit.css" rel="stylesheet" />
<link href="/Content/assets/plugins/bootstrap-combobox/css/bootstrap-combobox.css" rel="stylesheet" />
<link href="/Content/assets/cSS/fileinput.min.css" rel="stylesheet" />
<link href="/Content/assets/plugins/switchery/switchery.min.css" rel="stylesheet" />
<link href="/Content/assets/plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css" rel="stylesheet" />
<link href="/Content/assets/plugins/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet" />
<link href="/Content/assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" />


<div id="content" class="content">
    <div class="row">
        <!-- begin col-12 -->
        <div class="col-md-12">
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">更新用户信息</h4>
                </div>
                <div class="panel-body">
                    <form action="@Url.Action("AddUser","BackStage")" method="POST" data-parsley-validate="true" name="form-wizard" id="AddUser">
                        <div id="wizard">
                            <ol>
                                <li>
                                    用户信息
                                    <small>获取到用户安装需求时为用户建立用户基本信息</small>
                                </li>
                                <li>
                                    配置船舶
                                    <small>向用户索要管理的船舶信息，添加船舶的MMSI，建立船舶信息</small>
                                </li>
                                <li>
                                    客户端信息配置
                                    <small>由具有权限的操作人员配置该终端对应的配置信息文件</small>
                                </li>
                                <li>
                                    许可号
                                    <small>为用户现场安装时配置许可号信息,填写用户名、注册码生成许可号后，在将许可号填入</small>
                                </li>
                                <li>
                                    完成配置
                                    <small>以上流程可多次修改保存，确认填写完毕则保存</small>
                                </li>
                            </ol>
                            <!-- begin wizard step-1 -->
                            <div class="wizard-step-1">
                                <fieldset>
                                    <legend class="pull-left width-full">用户信息</legend>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <span class="text-muted m-l-5 m-r-20">是否已有公司</span>
                                            <input type="checkbox" data-render="switchery" data-theme="blue" id="IsHave" checked="checked" />
                                        </div>
                                        
                                    </div>

                                    <!-- begin row -->
                                    <div class="row" style="margin: 20px 0;">
                                        <!-- begin col-4 -->
                                        <div class="col-md-4" id="selectCompany">
                                            <label class="control-label col-md-4">公司名</label>
                                            <select class="combobox" id="company">
                                                @if (string.IsNullOrEmpty(user.CompanyName))
                                                {
                                                    <option value="">请设置公司名</option>
                                                }
                                                else
                                                {
                                                    <option value="@user.Company">@user.CompanyName</option>
                                                }
                                                @foreach (var company in companylist)
                                                {
                                                    <option value="@company.CompanyId">@company.Name</option>
                                                }
                                            </select>
                                        </div>
                                        <div id="companyInfo" style="display: none">
                                            <div class="col-md-4">
                                                <div class="form-group block1">
                                                    <label>公司名</label>
                                                    <input type="text" name="Name" id="Name" value="" placeholder="公司名" class="form-control" data-parsley-group="wizard-step-1" />
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group block1">
                                                    <label>联系人</label>
                                                    <input type="text" name="ContactName" id="ContactName" value="" placeholder="联系人" class="form-control" data-parsley-group="wizard-step-1" />
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group block1">
                                                    <label>联系电话</label>
                                                    <input type="text" id="Phone" name="Phone" value="" placeholder="联系电话" class="form-control" data-parsley-group="wizard-step-1" />
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group block1">
                                                    <label>联系地址</label>
                                                    <input type="text" id="Address" name="Address" value="" placeholder="联系地址" class="form-control" data-parsley-group="wizard-step-1" />
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group block1">
                                                    <label>联系邮箱</label>
                                                    <input type="text" id="Email" name="Email" value="" placeholder="联系邮箱" class="form-control" data-parsley-group="wizard-step-1" />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end col-4 -->
                                        <!-- begin col-4 -->
                                        <!-- end col-4 -->
                                    </div>
                                    <!-- end row -->
                                </fieldset>
                            </div>
                            <!-- end wizard step-1 -->
                            <!-- begin wizard step-2 -->
                            <div class="wizard-step-2">
                                <fieldset>
                                    <legend class="pull-left width-full">配置船舶</legend>
                                    <div class="row">
                                        <div class="col-md-2">
                                           
                                            <select class="combobox" id="mmsi">
                                                <option value="">选择已有用户</option>
                                                @foreach (var u in userlist)
                                                {
                                                    <option value="@u.MMSI">@u.UserName</option>
                                                }
                                              
                                            </select>
                                            <p style="color:#e5603b">可以选择已建立用户的mmsi信息</p>
                                        </div>

                                    </div>
                                    <!-- begin row -->
                                    <div class="row">
                                        <div class="form-group ">
                                            
                                        </div>
                                       

                                        <!-- begin col-6 -->
                                        <div class="form-group ">
                                            <div class="col-md-8">
                                                <ul id="MMSIList">
                                                    @if (!string.IsNullOrEmpty(user.MMSI))
                                                    {
                                                        foreach (var mmsi in user.MMSI.Split(','))
                                                        {
                                                            <li>@mmsi</li>
                                                        }
                                                    }
                                                </ul>
                                                <p>请输入需要添加的mmsi,输入完毕按回车 </p>
                                                <a class="btn btn-success btn-sm" id="saveMMSI" role="button">确认</a>
                                            </div>
                                            <div class="col-md-3">
                                                <input id="fileupload" type="file" name="files[]" data-url="Import" multiple>
                                                <p style="color:#e5603b">只支持xls,xlsx的Excel文件格式</p>
                                                <p style="color:#e5603b">请确保mmsi值为同一列并且满足9位纯数字的规则</p>
                                                <a href="/UpLoad/xls/E-navigation-申请表.xls" target="_blank" class="btn btn-sm btn-primary start " >
                                                    <i class="fa fa-file-excel-o"></i>
                                                    <span>下载Excel文件</span>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- end col-6 -->
                                    </div>
                                    <div class="panel ">
                                        <div class="panel-body">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th>船名</th>
                                                        <th>MMSI</th>
                                                        <th>状态</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="shipList">
                                                    @foreach (var ship in shipList)
                                                    {
                                                        <tr class="success">
                                                            <td>@ship.Name</td>
                                                            <td>@ship.MMSI</td>
                                                            <td>配置正确</td>
                                                        </tr>
                                                    }
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!-- end row -->
                                </fieldset>
                            </div>
                            <!-- end wizard step-2 -->
                            <!-- begin wizard step-3 -->
                            <div class="wizard-step-3">
                                <fieldset>
                                    <legend class="pull-left width-full">岸基客户端信息</legend>
                                    @if (!String.IsNullOrEmpty(user.Company))
                                    {
                                        <select class="form-control width-250" style="width:43%;" id="configs">
                                            <option value="">请选择配置项</option>
                                            @foreach (var config in configlist.Where(m => m.CompanyId == user.Company))
                                            {
                                                if (config.Id == user.Configs)
                                                {
                                                    <option value="@config.Id" selected="selected">@config.ConfigName</option>
                                                }
                                                else
                                                {
                                                    <option value="@config.Id">@config.ConfigName</option>
                                                }

                                            }
                                        </select>
                                    }
                                    else
                                    {
                                        <span class="text-muted m-l-5 m-r-20" style="color:#e5603b">选择公司或建立用户信息后，请先保存在设置配置项</span>
                                    }
                                    @*<div class="row">
                                            <!-- begin col-4 -->
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>客户端名称</label>
                                                    <div class="controls">
                                                        <input type="text" name="ClientName" id="ClientName" placeholder="船舶安全监控系统" class="form-control"  >
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- end col-6 -->
                                        </div>
                                        <!-- begin row -->
                                        <div class="row">
                                            <!-- begin col-4 -->
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>LOGO</label>
                                                    <div class="controls">
                                                        <input id="file-Portrait1" type="file">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end col-4 -->
                                            <!-- begin col-4 -->
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>客户端初始化加载图片</label>
                                                    <div class="controls">
                                                        <input id="file-Portrait2" type="file">
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- end col-6 -->
                                        </div>*@
                                    <!-- end row -->
                                </fieldset>
                            </div>
                            <div class="wizard-step-4">
                                <fieldset>
                                    <legend class="pull-left width-full">许可号配置</legend>
                                    <!-- begin row -->
                                    <div class="row">
                                        <!-- begin col-4 -->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>用户名</label>
                                                <div class="controls">
                                                    <input type="text" name="UserName" id="UserName" value="@user.UserName" placeholder="用户名" class="form-control" data-parsley-group="wizard-step-4" required />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end col-4 -->
                                        <!-- begin col-4 -->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>注册码</label>
                                                <div class="controls">
                                                    <input type="text" name="Register" id="Register" value="@user.Register" placeholder="注册码" class="form-control" data-parsley-group="wizard-step-4" required />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end col-4 -->
                                        <!-- begin col-4 -->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>许可号</label>
                                                <div class="controls">
                                                    <input type="text" name="Account" id="Account" value="@user.Account" placeholder="许可号" class="form-control" data-parsley-group="wizard-step-4" required />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end col-6 -->
                                    </div>
                                    <!-- end row -->
                                </fieldset>
                            </div>
                            <!-- end wizard step-3 -->
                            <!-- begin wizard step-4 -->
                            <div>
                                <div class="jumbotron m-b-0 text-center">
                                    <h1>操作流程</h1>
                                    <p>1.获取到用户安装需求时为用户建立用户基本信息</p>
                                    <p>2.向用户索要管理的船舶信息，添加船舶的MMSI，建立船舶信息</p>
                                    <p>3.由具有权限的操作人员配置该终端对应的配置信息文件</p>
                                    <p>4.为用户现场安装时配置许可号信息,填写用户名、注册码生成许可号后，在将许可号填入</p>
                                    <p><a class="btn btn-success btn-lg" id="save" role="button">保存</a></p>
                                </div>
                            </div>
                            <!-- end wizard step-4 -->
                        </div>
                        <input type="hidden" name="MMSI" id="MMSI" />
                        <input type="hidden" name="Id" id="Id" value="@(user.Id)" />
                    </form>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end col-12 -->
    </div>
</div>

@section footer {
    <script src="/Content/assets/plugins/parsley/dist/parsley.js"></script>
    <script src="/Content/assets/plugins/bootstrap-wizard/js/bwizard.js"></script>
    <script src="/Content/assets/js/form-wizards-validation.demo.min.js"></script>
    <script src="/Content/assets/plugins/jquery-tag-it/js/tag-it.min.js"></script>
    <script src="/Content/assets/plugins/jquery-tag-it/js/tag-it.min.js"></script>
    <script src="/Content/assets/js/fileinput.min.js"></script>
    <script src="/Content/assets/plugins/bootstrap-combobox/js/bootstrap-combobox.js"></script>
    <script src="/Content/assets/plugins/switchery/switchery.min.js"></script>
    <script src="/Content/assets/js/form-slider-switcher.demo.min.js"></script>
    <script src="/Content/assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="/Content/assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="/Content/assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script>
        $(document)
            .ready(function () {
                App.init();
                FormWizardValidation.init();
                FormSliderSwitcher.init();
                $("#MMSIList").tagit();
                $("#mmsi").combobox();
                $("#company").combobox();
                $("#IsHave")
                    .change(function () {
                        if ($("#IsHave").prop("checked")) {
                            $("#companyInfo").hide();
                            $("#selectCompany").show();
                        } else {
                            $("#selectCompany").hide();
                            $("#companyInfo").show();
                        }
                    });


                $("#save")
                    .click(function () {
                        var MMSI = "";
                        $("#MMSIList")
                            .find(".tagit-label")
                            .each(function () {
                                MMSI += $(this).text() + ",";
                            });
                        var Name = $("#Name").val();
                        var Address = $("#Address").val();
                        var Phone = $("#Phone").val();
                        var Email = $("#Email").val();
                        var ContactName = $("#ContactName").val();
                        var Company = $("#company").val();
                        var UserName = $("#UserName").val();
                        var Register = $("#Register").val();
                        var Account = $("#Account").val();
                        var Id = $("#Id").val();
                        var configs = $("#configs").val();

                        var json = {};
                        if (!$("#IsHave").prop("checked")) {
                            json = {
                                "Name": Name,
                                "Phone": Phone,
                                "Email": Email,
                                "Address": Address,
                                "ContactName": ContactName,
                                "MMSI": MMSI,
                                "UserName": UserName,
                                "Register": Register,
                                "Account": Account,
                                "Id": Id,
                                "Configs": configs
                            };
                        } else {
                            json = {
                                "Company": Company,
                                "MMSI": MMSI,
                                "UserName": UserName,
                                "Register": Register,
                                "Account": Account,
                                "Id": Id,
                                "Configs": configs
                            };
                        }
                        client.api.modifyUser(json,
                            function (data) {
                                if (data.ReCode == "1000") {
                                    alert("保存成功");
                                } else {
                                    alert(data.ReMsg);
                                }
                            },
                            function (data) {
                            });
                    });

                $("#saveMMSI")
                    .click(function () {
                        var MMSI = "";
                        $("#MMSIList")
                            .find(".tagit-label")
                            .each(function () {
                                MMSI += $(this).text() + ",";
                            });
                        client.api.checkMMSI({ "MMSI": MMSI },
                            function (data) {
                                if (data.ReCode != "1000") {
                                    alert(data.ReMsg);
                                } else {
                                    $("#shipList").empty();
                                    for (var i = 0; i < data.ReData.length; i++) {
                                        if (data.ReData[i].Result=="MMSI错误")
                                        {
                                            $($(".tagit-choice")[i]).find("span").addClass("text-danger");
                                            var html = '<tr class="danger"><td>' +
                                           data.ReData[i].Name +
                                           '</td><td>' +
                                           data.ReData[i].MMSI +
                                           '</td><td>' +
                                           data.ReData[i].Result +
                                           '</td></tr>';
                                        } else
                                        {
                                            var html = '<tr class="success"><td>' +
                                           data.ReData[i].Name +
                                           '</td><td>' +
                                           data.ReData[i].MMSI +
                                           '</td><td>' +
                                           data.ReData[i].Result +
                                           '</td></tr>';
                                        }
                                       
                                        $("#shipList").append(html);
                                    }
                                }
                            },
                            function (data) {
                            });
                    });

                $("#mmsi").change(function () {
                    if ($("#mmsi").val() == "") {
                    } else {
                        var arr = $("#mmsi").val().split(",");
                        $("#MMSIList").tagit("removeAll");
                        for (var i = 0; i < arr.length; i++) {
                            $("#MMSIList").tagit("createTag", arr[i]);
                        }
                    }
                });

                @*//初始化fileinput控件（第一次初始化）
                $("#file-Portrait1")
                    .fileinput({
                        language: 'zh', //设置语言
                        uploadUrl: "/BackStage/UploadImg?type=1&Id=" + $("#Id").val(), //上传的地址
                        allowedFileExtensions: ['jpg', 'png', 'gif', 'bmp', 'ico'], //接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        showCaption: false, //是否显示标题
                        browseClass: "btn btn-primary", //按钮样式
                        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                        maxFileCount: 1,
                        enctype: 'multipart/form-data',
                        initialPreview:  "@Html.Raw(logo)"
                    });

                $("#file-Portrait2")
                    .fileinput({
                        language: 'zh', //设置语言
                        uploadUrl: "/BackStage/UploadImg?type=2&Id=" + $("#Id").val(), //上传的地址
                        allowedFileExtensions: ['jpg', 'png', 'gif', 'bmp', 'ico'], //接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        showCaption: false, //是否显示标题
                        browseClass: "btn btn-primary", //按钮样式
                        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                        maxFileCount: 1,
                        enctype: 'multipart/form-data',
                        initialPreview: "@Html.Raw(client)"
                    });*@

            });


        $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                acceptFileTypes: /(\.|\/)(xlsx|xls)$/i,
                done: function (e, data) {
                    if (data.result.Data != undefined)
                    {
                        if (data.result.Data == "0")
                        {
                            alert("未找到mmsi信息，请检查文件");
                            return false;
                        }
                        var arr = data.result.Data.split(",");
                        $("#MMSIList").tagit("removeAll");
                        for (var i = 0; i < arr.length; i++)
                        {
                            $("#MMSIList").tagit("createTag", arr[i]);
                        }
                    } else if (data.error != undefined)
                    {
                        alert(data.error);
                    }else
                    {
                        alert("上传失败，只支持上传xls或xlsx格式文件");
                    }


                    
                }
            });
        });
    </script>
}
